<template>
    <div>
        <el-dialog center :title="info.win ? '添加商品规格' : '修改商品规格'" :before-close="close" :visible.sync="info.isShow">
            <el-form :model="specsAdd" :rules="rules" ref="specsInfo">
                <el-form-item label="规格名称" prop="specsname" :label-width="formLabelWidth">
                    <el-input v-model="specsAdd.specsname" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item v-for="(item, index) in attrArr" label="规格属性" :label-width="formLabelWidth">
                    <el-input class="inp" v-model="item.value" autocomplete="off"></el-input>
                    <el-button v-if="index == 0" type="primary" @click="addPush">新增规格属性</el-button>
                    <el-button v-else type="danger" @click="del(index)">删除</el-button>
                </el-form-item>

                <el-form-item label="状态" :label-width="formLabelWidth">
                    <el-switch v-model="specsAdd.status" active-color="#13ce66" inactive-color="#ff4949"
                        :active-value="1" :inactive-value="2">
                    </el-switch>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="close">取 消</el-button>
                <el-button type="primary" @click="confirm">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
// 引入封装好的接口
import { specsAdd, specsInfo, specsEdit } from '../../request/api'
// 辅助性函数
import { mapActions } from 'vuex'
export default {
    props: ['info'],
    data() {
        return {
            formLabelWidth: "120px",
            specsAdd: {
                specsname: '',
                attrs: '',
                status: 1,
            },
            //规则验证
            rules: {
                specsname: [
                    { required: true, message: "请输入商品规格名称", trigger: "blur" },
                    {
                        min: 2,
                        max: 15,
                        message: "长度在 2 到 15 个字符",
                        trigger: "blur",
                    },
                ],
            },
            //设置一个空数组，用于循环动态input
            attrArr: [
                {
                    value: "",
                },
            ],
        };
    },
    methods: {
        ...mapActions({
            specsList: 'specs/changeSpecsAction',
            specsCount: 'specs/changeCountAction'
        }),
        // 增加规格属性事件
        addPush() {
            if (this.attrArr.length > 6) {
                this.$message.warning('最多添加6条')
            } else {
                this.attrArr.push({
                    value: "",
                })
            }
        },
        // 删除规格属性
        del(i) {
            this.attrArr.splice(i, 1)
        },
        // 取消事件
        close() {
            this.$emit('close', false)
            this.specsAdd = {
                specsname: '',
                attrs: '',
                status: 1,
            }
            // 置空
            this.$refs.specsInfo.resetFields()
            //清空动态表单项
            this.attrArr = [
                {
                    value: "",
                },
            ];
        },
        lookup(id) {
            // 调用查询接口
            specsInfo({
                id
            }).then(res => {
                console.log(res, '一条数据');
                this.specsAdd = res.list[0];
                this.specsAdd.id = id;
                this.specsAdd.attrs.map((item, index) => {
                    if (index == 0) {
                        this.attrArr[0].value = item
                    } else {
                        this.attrArr.push({
                            value: item
                        })
                    }
                    // this.attrArr.push({
                    //     value: item
                    // })
                })
            })
        },
        // 确认按钮事件
        confirm() {
            this.$refs.specsInfo.validate(flag => {
                if (flag) {
                    //验证成功
                    console.log(this.specsAdd, '表单');
                    this.specsAdd.attrs = this.attrArr.map(item => item.value).join(',')
                    if (this.info.win) {
                        console.log(this.specsAdd, 'dddddddddddddd');
                        // 添加接口
                        specsAdd(this.specsAdd)
                            .then(res => {
                                console.log(res, '商品规格添加');
                                if (res.code == 200) {
                                    this.$message.success(res.msg)
                                    // 清空
                                    this.close()
                                    this.specsList()
                                    this.specsCount()
                                } else {
                                    this.$message.error(res.msg)
                                }
                            })
                    } else {
                        // 编辑接口
                        specsEdit(this.specsAdd)
                            .then(res => {
                                console.log(res, '编辑');
                                if (res.code == 200) {
                                    this.$message.success(res.msg)
                                    // 清空
                                    this.close()
                                    this.specsList()
                                    this.specsCount()
                                } else {
                                    this.$message.error(res.msg)
                                }
                            })
                    }
                } else {
                    // 验证失败
                }
            })
        }
    }
};
</script>

<style  lang="less" scoped>
.inp {
    width: 70%;
}
</style>
